<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SignUp</title>
</head>
<body>

<hr>

<div>
    <table cellpadding="5">
        <tr>
            <th valign="top">注册邮箱:</th>
            <td>
                <input type="text"><br>
                你还可以手机注册
            </td>
        </tr>

        <tr>
            <th>
                创建密码:
            </th>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <th>真实姓名:</th>
            <td><input type="text"></td>
        </tr>

        <tr>
            <th align="right">性别:</th>
            <td>
                <input type="radio" name="gender">男
                <input type="radio" name="gender">女
            </td>
        </tr>

        <tr>
            <th align="right">生日:</th>
            <td>
                <select name="year" id="selectYear" onchange="getDay()">
                </select>
                年
                <select name="month" id="selectMonth" onchange="getDay()">
                </select>
                月
                <select name="day" id="selectDay">
                </select>
                日
            </td>
        </tr>

        <tr>
            <th align="right">我正在:</th>
            <td>
                <select name="doSomething">
                    <option value="">睡觉</option>
                    <option value="" selected>吃饭</option>
                    <option value="">拉屎</option>
                    <option value="">上课</option>
                    <option value="">游戏</option>
                </select>
            </td>
        </tr>

        <tr>
            <th></th>
            <td>
                <img src="./verycode.gif" alt="验证码">
                看不清楚，换一张
            </td>
        </tr>

        <tr>
            <th align="right">验证码:</th>
            <td><input type="text"></td>
        </tr>

        <tr>
            <th></th>
            <td>
                <img src="./btn_reg.gif" alt="立即注册">
            </td>
        </tr>
    </table>
</div>


<script>
    function initSelect() {
        var selectYearNode = document.getElementById('selectYear');
        for (var i = 2021; i >= 1949; i--) {
            var optionElement = document.createElement('option');
            optionElement.innerText = i;
            selectYearNode.appendChild(optionElement);
        }

        var selectMonthNode = document.getElementById('selectMonth');
        for (var i = 1; i <= 12; i++) {
            var optionElement = document.createElement('option');
            if (i<10){
                optionElement.innerText = '0'+i;
            }else{
                optionElement.innerText = i;
            }
            selectMonthNode.appendChild(optionElement);
        }

        printDay(31);

    }

    initSelect();

    // 监控 年+月 改变对应的day
    function getDay() {
        var year = document.getElementById('selectYear').value;
        var month = document.getElementById('selectMonth').value;

        if (month == 4 || month == 6 || month == 9 || month == 11) {
            printDay(30)
        }else if (month == 2) {
            if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) {
                printDay(29)
            }else
                printDay(28)
        }else{
            printDay(31)
        }
        return;
    }

    function printDay( dayNumber) {
        var selectDayNode = document.getElementById('selectDay');
        selectDayNode.innerText = '';
        for (var i = 1; i <= dayNumber; i++) {
            var optionElement = document.createElement('option');
            if (i<10){
                optionElement.innerText = '0'+i;
            }else{
                optionElement.innerText = i;
            }
            selectDayNode.appendChild(optionElement);
        }
    }
</script>
</body>
</html>